<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">ajax-get</button>
    <script>
      const btn = document.getElementById('btn')
      btn.onclick = function () {
        // 1. 创建xhr实例
        const xhr = new XMLHttpRequest()
        // console.log(xhr.readyState)// 0
        // 2. 设置请求方式和请求的url地址
        xhr.open('get', 'http://localhost:5000/a/999?name=zs&age=18')

        // 3. 设置请求头
        // get请求不需要设置请求头

        // 4. 设置请求主体并发送请求
        // get请求没有请求主体,所以send里面什么都不用写或写一个null
        xhr.send()

        // 获取响应主体中的数据
        // console.log(xhr.readyState) //1
        // 0 open函数还未调用
        // 1 open函数调用了
        // 2 开始接收响应头的信息了
        // 3 开始接收响应主体的信息了
        // 4 请求响应完成了
        // 监听readyState的变化
        xhr.onreadystatechange = function () {
          // 注意: 这个函数只会触发3次,分别是2,3,4的时候
          if (xhr.readyState === 4) {
            // 表示请求响应完成了
            // console.log('请求响应完成了')
            // xhr.status 用于获取状态码
            if (xhr.status === 200) {
              console.log('请求响应成功了', xhr.responseText)

              console.log(xhr.getAllResponseHeaders()) // 获取响应头中所有信息
              console.log(xhr.getResponseHeader('content-type')) // 获取响应头中指定信息
            } else {
              console.log('请求响应失败了')
            }
          }
        }
      }
    </script>
  </body>
</html>
